<template>
	<view>
		<view   class="test_one" v-show="acIndex==index" :key="item._id" v-for="(item,index) in testList">
			<view class="test_title">
				<text>{{index+1}}.</text>
				<text>{{item.topic}}</text>
			</view>
			<view class="test_radio" >
				 <u-radio-group
				    placement="column"
				  >
				    <u-radio
					  :size="30"
					:labelSize="30"
				      :customStyle="{marginBottom: '8px'}"
				      v-for="(sitem,ind) in item.options"
				      :key="ind"
				      :label="sitem.title"
				      :name="sitem.son_id"
				      @change="radioChange"
				    >
				    </u-radio>
				  </u-radio-group>
			</view>
		</view>
		<view v-if="acIndex==testList.length">
			<u-button type="success">提交问卷</u-button>
		</view>
	</view>
</template>

<script>
	import {getTestApi} from '@/api/test.js'
	export default {
		data(){
			return {
				 acIndex:0,//显示的下标
				 testList:[],//题目数组
				 answer:[]//答案数组
			}
		},
		onLoad(){
			this.getTestList();
		},
		methods:{

			  radioChange(name) { //单选框的change事件 
				console.log('radioChange', name);
				this.answer.push(name) //push每次答案
				console.log(this.answer)
					if(this.acIndex>this.testList.length){
						
					}else{
					 let timer=setTimeout(()=>{
						  	this.acIndex++
							clearTimeout(timer)
					  },1000)
					}
		
			
			  },
			async getTestList(){ //获取抑郁测试题接口
				let res=await getTestApi()
				console.log(res,"-----------")
				this.testList=res.data
			}
		}
	}
</script>

<style lang="scss">
		.test_title{
			font-size: 35px;
			margin-left: 20px ;
		}
		.test_radio{
			font-size: 20px;
			margin-left: 20px ;
		}
</style>